<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
    <!-- 事件监听：绑定事件、触发事件 
        1.html属性中提供了on+事件类型：耦合性高、代码复用率低(不推荐使用)  例如：onclick后跟事件类型 
        2.DOM0绑定事件：对象.属性（on+事件类型）=事件处理函数
        3.DOM2绑定事件：对象.方法（）;
    -->

    <!-- 事件源 -->
    <button style="font-size: 36px;" onclick="alert('hello word!')">点击1</button> 
    <!-- <button onclick="console.log('hello word!')">点击</button> --> 


    <button class="ck">点击2</button>
    <script>
        //获取节点
        const btn=document.querySelector('.ck');
        //对象.属性=事件处理程序（函数）
        btn.onclick=function(){
            alert('hello btn2');
        }
        btn.onclick=null;//移出事件
        btn.style.fontSize='45px';
        console.log(btn.getAttribute('data-index'));
    </script>


    <button id="btn">点击3</button>
    <script>
        const ck=document.querySelector('#btn');
        //添加事件监听（函数）addEventListener('事件类型'，'事件处理函数',[true/false])
            //事件类型不需要加前缀on
        // ck.addEventListener('click',function(){
        //     alert('hello btn3');
        // });
        // ck.removeEventListener('click',function(){
        //     alert('hello btn3');
        // });
        ck.addEventListener('click',test);
        ck.removeEventListener('click',test);
         
        let test=function(){
            alert('hello btn3');
        }
    </script>
</body>

</html>